<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>天气预报动画</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px/1.25 tahoma, arial, 宋体, sans-serif;
		}

		li {
			list-style: none;
		}

		a {
			text-decoration: none;
		}

		body {
			width: 100%;
			height: 100%;
			background: #000;
			_position: relative;
			overflow: hidden;
		}

		.page {
			position: fixed;
			_position: absolute;
			right: 0;
			bottom: 0;
		}

		#qf_bottom {
			width: 203px;
			height: 50px;
			background: url(img/minibar.png) no-repeat 0 0;
			position: absolute;
			right: -165px;
			bottom: 0;
			z-index: 20001;
		}

		#nav {
			height: 22px;
			margin: 5px 0 0 43px;
			width: 125px;
		}

		#nav li {
			float: left;
			width: 25px;
		}

		#nav li a {
			display: block;
			height: 22px;
			width: 25px;
		}

		#nav li .show,
		#nav li a:hover {
			background: url(img/minibar.png) no-repeat 0 -51px;
		}

		#nav .li_1 .show,
		#nav .li_1 a:hover {
			background-position: -25px -51px
		}

		#nav .li_2 .show,
		#nav .li_2 a:hover {
			background-position: -50px -51px
		}

		#nav .li_3 .show,
		#nav .li_3 a:hover {
			background-position: -75px -51px
		}

		#nav .li_4 .show,
		#nav .li_4 a:hover {
			background-position: -100px -51px
		}

		.qf {
			color: #FFFFFF;
			height: 16px;
			margin: 4px 0 0 8px;
			overflow: hidden;
			width: 160px;
		}

		#but {
			bottom: 0;
			display: block;
			height: 50px;
			position: absolute;
			right: 0;
			width: 33px;
			z-index: 20002;
		}

		.but_hide {
			background: url(img/minibar.png) no-repeat -170px 0;
		}

		.but_hide:hover {
			background-position: -203px 0;
		}

		.but_show {
			background: url(img/minibar.png) no-repeat -236px 0;
		}

		.but_show:hover {
			background-position: -269px 0;
		}

		#qf_box {
			bottom: -315px;
			display: none;
			height: 315px;
			padding: 0 0 48px;
			position: absolute;
			right: 1px;
			width: 200px;
			z-index: 20000;
		}

		.bg {
			background: url(img/mini_jpgs.jpg) no-repeat 0 0;
			height: 315px;
			opacity: 0.9;
			position: absolute;
			right: 0;
			top: 0;
			width: 200px;
		}

		.nav2_bg {
			bottom: 48px;
			height: 176px;
			left: 0;
			position: absolute;
			width: 34px;
			background: url(img/mini_jpgs.jpg) no-repeat 0 -139px;
		}

		#list_nav {
			background: url(img/minibar.png) no-repeat scroll 0 -255px transparent;
			height: 139px;
			left: 0;
			position: absolute;
			top: 2px;
			width: 34px;
		}

		#list_nav a {
			color: #FFFFFF;
			display: block;
			height: 27px;
			line-height: 25px;
			text-align: center;
			text-decoration: none;
		}

		#list_nav .show {
			color: #FF9900;
		}

		#list_nav a:hover {
			color: #FFFF00;
		}

		.clos {
			background: url(img/minibar.png) no-repeat 0 -76px;
			cursor: pointer;
			height: 9px;
			position: absolute;
			right: 10px;
			top: 14px;
			width: 9px;
		}

		.box_right {
			color: #FFFFFF;
			height: 285px;
			overflow: hidden;
			position: absolute;
			right: 6px;
			top: 28px;
			width: 150px;
		}
	</style>
</head>

<body>
	<div class="page">
		<div id="qf_bottom">
			<ul id='nav'>
				<li><a href="###"></a></li>
				<li class='li_1'><a href="###"></a></li>
				<li class='li_2'><a href="###"></a></li>
				<li class='li_3'><a href="###"></a></li>
				<li class='li_4'><a href="###"></a></li>
			</ul>
			<h2 class="qf">千锋JS</h2>
		</div>
		<a class="but_show" id="but" href="###"></a>
		<div id="qf_box">
			<div class="bg"></div>
			<div class="nav2_bg"></div>
			<ul id="list_nav">
				<li><a class="show" href="#" target="_blank">天气</a></li>
				<li class="tab2"><a href="#" target="_blank">星座</a></li>
				<li class="tab3"><a href="#" target="_blank">排行</a></li>
				<li class="tab4"><a href="#" target="_blank">热点</a></li>
				<li class="tab5"><a href="#" target="_blank">直播</a></li>
			</ul>
			<a class='clos' id="btn_close"></a>
			<div class="box_right">
				<div>北京</div>
				<div>
					<div>
						<strong><em>今天</em> (周二)</strong>
						<img title="晴" src="img/01.gif" class="pic">
					</div>
					<span>-1~10C°</span>
					<span>晴</span>
					<span>微风小于3级</span>
				</div>
				<div>
					<div>
						<strong><em>明天</em> (周三)</strong>
						<img title="多云" src="img/02.gif" class="pic">
					</div>
					<span>0~11C°</span>
					<span>多云</span>
					<span>北风3-4级</span>
				</div>
				<div>
					<div>
						<strong><em>后天</em> (周四)</strong>
						<img title="晴" src="img/01.gif" class="pic">
					</div>
					<span>-1~12C°</span>
					<span>晴</span>
					<span>北风3-4级 转 微风小于3级</span>
				</div>
			</div>
		</div>
	</div>
	</div>

	<script src="./js/move.js"></script>
	<script>
		// 获取元素
		let showBtn = document.querySelector('.but_show');
		let closeBtn = document.querySelector('#btn_close');

		let qfBottom = document.querySelector('#qf_bottom');
		let qfBox = document.querySelector('#qf_box');
		

		// 展开：链式运动
		showBtn.onclick = () =>{
			move(qfBottom,{right:0},()=>{
				qfBox.style.display = 'block';
				move(qfBox,{bottom:0})
			})
		}

		// 收缩：链式运动
		closeBtn.onclick = () =>{
			move(qfBox,{bottom:-315},()=>{
				qfBox.style.display = 'none';
				move(qfBottom,{right:-165})
			})
		}
		
	</script>
</body>

</html>